/* 选择器*/
/* 元素选择器:div,input,icon,a,etc,p... */
 button,p{
     color: blue;
     transition: all, 5s ease;
 }

/* 伪类 */

                        /* "span"一定要是子元素 */
span:first-child{   
    font-weight: bolder;

}
span:last-child{
    color: chocolate;
}

span:nth-child(2){
    color: khaki;
}

p:first-of-type{
    font-size: 50px;
}

p:nth-last-of-type(2){
    color: green;
}



/* 伪元素。它的某些状态 */
button:before{
    content: '|';
    position: relative;
    right: 20px;
}
button:hover{
    border-radius: 10px ;
}
button:focus{
    color: cadetblue;
}

/* 类选择器:class */
 .first{
    font-size: 20px;
 }
 
 .item{
     border: 2px solid black;
 }

 /* id选择器:class
 一个元素只能有一个id */
 #slar{
     background-color: aqua;
 }

 /* 属性选择器 */
 [name = "riri"]{
     padding: 15px;
 }


 [type = "text"]{
     border: 5px solid violet;
 }

 [name^="ri"]{                 /* ^=表示ri开头的所有元素； $=表示ri结尾的所有元素*/
    color: brown;
 }

 /* 全局选择器 
 优先级最低*/
 *{
     font-size: 30px;
 }

